<template>
  <div class="search-form">
    <el-form :model="searchForm" inline class="search-form-container">
      <slot name="prepend" :searchForm="searchForm" :updateSearchForm="updateSearchForm"></slot>

      <el-form-item v-if="showStatusFilter" :label="statusLabel" class="status-item">
        <DictStatusFilter
          v-model="searchForm[statusField]"
          :dict-code="dictCode"
          :placeholder="statusPlaceholder"
          :include-all="includeAll"
          :all-text="allText"
          class="status-select"
        />
      </el-form-item>

      <slot name="append" :searchForm="searchForm" :updateSearchForm="updateSearchForm"></slot>

      <el-form-item class="action-buttons">
        <el-button type="primary" @click="handleSearch" size="default">
          <el-icon class="mr-1">
            <Search />
          </el-icon>搜索
        </el-button>
        <el-button @click="handleReset" size="default">
          <el-icon class="mr-1">
            <Refresh />
          </el-icon>重置
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import DictStatusFilter from "./DictStatusFilter.vue";

const props = defineProps({
  // 字典code
  dictCode: {
    type: String,
    required: true,
  },
  // 是否显示状态筛选
  showStatusFilter: {
    type: Boolean,
    default: true,
  },
  // 状态字段名
  statusField: {
    type: String,
    default: "status",
  },
  // 状态标签
  statusLabel: {
    type: String,
    default: "状态",
  },
  // 状态占位符
  statusPlaceholder: {
    type: String,
    default: "请选择状态",
  },
  // 是否包含全部选项
  includeAll: {
    type: Boolean,
    default: true,
  },
  // 全部选项文本
  allText: {
    type: String,
    default: "全部",
  },
  // 初始搜索条件
  initialForm: {
    type: Object,
    default: () => ({}),
  },
});

const emit = defineEmits(["search", "reset"]);

const searchForm = reactive({
  ...props.initialForm,
  [props.statusField]: "",
});

// 更新搜索表单的值
const updateSearchForm = (field, value) => {
  searchForm[field] = value;
};

const handleSearch = () => {
  // 确保获取最新的表单值
  const params = { ...searchForm };
  emit("search", params);
};

const handleReset = () => {
  Object.keys(searchForm).forEach((key) => {
    searchForm[key] = "";
  });
  const params = { ...searchForm };

  emit("reset", params);
};

// 获取当前搜索条件
const getSearchParams = () => ({ ...searchForm });

// 设置搜索条件
const setSearchParams = (params) => {
  Object.assign(searchForm, params);
};

defineExpose({
  getSearchParams,
  setSearchParams,
});
</script>

<style scoped>
.search-form {
  margin-bottom: 20px;
  padding: 16px;
  padding-bottom: 6px;
  background-color: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.search-form-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.status-item {
  /* margin-bottom: 0; */
  margin-right: 16px;
}

.status-select {
  min-width: 180px;
}

.action-buttons {
  /* margin-bottom: 0; */
  margin-left: auto;
}

.action-buttons .el-button {
  margin-left: 8px;
}

.action-buttons .el-button:first-child {
  margin-left: 0;
}
</style>